Svelte 5 Runes support #1300

SeppahBaws · 2024-04-29T14:59:35Z

With Svelte 5 now being RC it's about time to finish this up, so that we have Svelte 5 support right when it comes out.

The main breaking changes Svelte 5 brings for us are Runes, which are incompatible with the old export let stuff that Houdini was generating for the query loads etc.

Todo list:

(ideally) Test in a bigger project and collect feedback
Make sure that tests broken by breaking changes are patched (https://svelte-5-preview.vercel.app/docs/breaking-changes)
Add section in Docs on Svelte 5

Feedback welcome!

If you would like to try this in your project, bump the version in your package.json to the latest @canary tag on npm.
Please feel free to give feedback in here on things that maybe are broken or could be done better.

For an example usage of how to use it in runes mode, check out the examples in the docs: https://deploy-preview-1300--houdinigraphql.netlify.app/guides/svelte-5

Sidenotes

I'm not entirely sure whether wrapping the store in a $derived() rune is the best way to go about it. I think ideally we would be able to define a custom rune $graphql(...) or $fragment(...) but I doubt that will happen.
Maybe the graphql() and fragment() functions could return a rune, so that the $derived() is hidden from the user. -> users don't need to edit anything about their queries to upgrade. need to experiment whether it would even work...

To help everyone out, please make sure your PR does the following:

Update the first line to point to the ticket that this PR fixes
Add a message that clearly describes the fix
If applicable, add a test that would fail without this fix
Make sure the unit and integration tests pass locally with pnpm run tests and cd integration && pnpm run tests
Includes a changeset if your fix affects the user with pnpm changeset

changeset-bot · 2024-04-29T14:59:38Z

🦋 Changeset detected

Latest commit: b01a6f4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
houdini-plugin-svelte-global-stores	Minor
houdini-svelte	Major
houdini	Minor
houdini-adapter-auto	Patch
houdini-adapter-cloudflare	Patch
houdini-adapter-node	Patch
houdini-adapter-static	Patch
houdini-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2024-04-29T14:59:51Z

✅ Deploy Preview for houdini-docs-next ready!

Name	Link
🔨 Latest commit	`3596843`
🔍 Latest deploy log	https://app.netlify.com/sites/houdini-docs-next/deploys/66afa41e68ae1400086bc3b6
😎 Deploy Preview	https://deploy-preview-1300--houdini-docs-next.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-04-29T14:59:52Z

✅ Deploy Preview for houdinigraphql canceled.

Name	Link
🔨 Latest commit	`b01a6f4`
🔍 Latest deploy log	https://app.netlify.com/sites/houdinigraphql/deploys/6709a8a3fa0da00008f00ca5

aumetra · 2024-05-01T16:00:02Z

I'm working on a full rewrite of a Vue app in Svelte 5 + SvelteKit, so I'd be happy to report any issues that come up.

SeppahBaws · 2024-05-15T08:05:16Z

There is one broken e2e test atm: the /lists/all route somehow only sends a query refetch every 2 times we press arrow up. Will require some more investigating...

paulocr · 2024-05-15T22:50:17Z

I am seeing lots of these as I make changes to my code, I am thinking it could be my dependencies:

TypeError: Cannot read properties of null (reading 'HoudiniClient')
    at /Users/paulo/development/vendure/sk5_vendure_frontend/src/client.ts:4:20
    at async instantiateModule (file:///Users/paulo/development/vendure/sk5_vendure_frontend/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-vyqc0_aB.js:50057:9)

These are my dependencies:

        "@sveltejs/adapter-auto": "^3.0.0",
        "@sveltejs/kit": "^2.0.0",
        "@sveltejs/vite-plugin-svelte": "^3.0.0",
        "@types/eslint": "^8.56.0",
        "@typescript-eslint/eslint-plugin": "^7.0.0",
        "@typescript-eslint/parser": "^7.0.0",
        "eslint": "^8.56.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-svelte": "^2.36.0-next.4",
        "houdini": "0.0.0-20240515214704",
        "houdini-svelte": "0.0.0-20240515214704",
        "prettier": "^3.1.1",
        "prettier-plugin-svelte": "^3.1.2",
        "svelte": "^5.0.0-next.1",
        "svelte-check": "^3.6.0",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "vite": "^5.0.3"

And here is my client.ts:

export default new HoudiniClient({
    url: 'http://localhost:3030/shop-api',
       throwOnError: {
        // can be any combination of
        // query, mutation, subscription, and all
        operations: ['all'],
        // the function to call
        error: (errors, ctx) =>
            error(
                500,
                `(${ctx.artifact.name}): ` + errors.map((err) => err.message).join('. ') + '.'
            ),
    }
})

For now my solution is to restart my dev server and things go along but I am curious if there is something you can spot that is wrong or if anyone is facing the same issue.

SeppahBaws · 2024-05-16T09:09:04Z

@paulocr hmmm strange, at first glance it looks like it's an error coming from a vite dependency. Can you try updating your vite version to the latest?
I haven't had enough time yet to mess around with svelte 5 enough in our project at work since other higher prio things keep popping up, so if you have a reproduction that would help a lot with tracking this down 🙂

SeppahBaws · 2024-06-06T07:58:16Z

So I think this PR is not in WIP anymore and is in general stable.
However I'm going to leave the PR as draft until Svelte 5 releases, and put it as ready for review once we can add a dependency on the final 5.0 version.

shadow-identity · 2024-07-08T09:18:11Z

Thank you all for your work!

Serator · 2024-08-02T09:01:05Z

Hey @SeppahBaws. First of all I would like to thank you for your work! I've been using the canary (0.0.0-20240707155617) version for some time now and today I ran into an issue where on the latest version of Svelte 5.0.0-next.206 I get an error in the dev-mode runtime: "ReferenceError: AppDataStore is not defined". In Svelte version 5.0.0.0-next.205 everything worked.

Unfortunately, I don't have a link to reproduce it right now. Here is the part of the code where the error occurs:

// app-data-subscription.gql
subscription AppData($id: uuid!) {
  // GQL here.
}

import {AppDataStore} from '$houdini'
const appDataStore = new AppDataStore()// <<< ReferenceError: AppDataStore is not defined

SeppahBaws · 2024-08-02T09:08:30Z

Hey @Serator, thanks for reporting this! I'll try to look into it this weekend.
Does the error only happen with subscriptions or also with query or mutation stores?

Serator · 2024-08-02T09:13:57Z

@SeppahBaws It's definitely happening with subscriptions, I don't know about the rest yet.

SeppahBaws · 2024-08-04T15:55:03Z

@Serator could you share a reproduction? I can't seem to recreate the error

Serator · 2024-08-13T13:09:26Z

Hi @SeppahBaws. Sorry, I've been traveling and haven't had a chance to post. I have now updated to the latest version of Svelte 5.0.0-next.219 and the issue is gone. I haven't had time to figure out what was causing it, but now the issue is not reproducing.

SeppahBaws · 2024-08-13T13:19:08Z

@Serator ah hmm strange, glad it's fixed tho 🙂

SeppahBaws · 2024-10-11T20:56:22Z

Just need to figure out why playwright suddenly doesn't want to play along anymore and then I guess we can merge this to the houdini-2.0 branch to kick off houdini@next 🙂

SeppahBaws force-pushed the svelte-5 branch 5 times, most recently from 2cc70d5 to f432d9c Compare May 19, 2024 09:53

SeppahBaws force-pushed the svelte-5 branch from b7d3fed to 5ef99eb Compare May 31, 2024 09:46

SeppahBaws changed the title ~~[WIP] Svelte 5 Runes support~~ Svelte 5 Runes support Jun 6, 2024

SeppahBaws force-pushed the svelte-5 branch from cb425a8 to 258e6f0 Compare July 5, 2024 16:37

AlecAivazis mentioned this pull request Jul 7, 2024

houdini vite plugin fail with latest sveltekit 2 #1246

Closed

SeppahBaws added this to the Houdini 2.0 milestone Jul 9, 2024

SeppahBaws added 8 commits August 4, 2024 17:25

Upgrade e2e/kit to Svelte 4

af0c812

Upgrade e2e/kit to SvelteKit 2

fb80ff0

Upgrade Vite to v5

c3624ad

Upgrade Svelte to v5

9dfd640

Upgrade playwright, add sample Svelte 5 runes demo

e342339

Add support for component queries

1476260

Fix component queries

f5321a5

Detect Runes by instead manually checking the script AST

663da1e

SeppahBaws added 11 commits August 4, 2024 17:28

Remove unused $derive, add mutation e2e test

cc50897

Bump node and pnpm versions in actions

0cf197e

Fix formatting

1a6816e

Bump Svelte version, add support for $state.is rune

ec4c225

Fix eslint problems

a4abf18

Hopefully fix lint errors for good now

06df1e9

Write Props typing as separate type for improved clarity

d196cab

Bump svelte version, add support for updated Runes

a10300b

Bump vite and svelte versions

bc9c670

Update changeset and config

3d55ad8

Bump svelte versions

3596843

SeppahBaws force-pushed the svelte-5 branch from d0a7c5f to 3596843 Compare August 4, 2024 15:54

SeppahBaws mentioned this pull request Aug 5, 2024

Bump dependency versions #1315

Closed

5 tasks

SeppahBaws changed the base branch from main to houdini-2.0 August 19, 2024 12:06

SeppahBaws added 5 commits August 19, 2024 21:46

Merge latest changes from main branch

9aa1de7

Bump eslint in e2e/kit, update erroring old svelte syntax

309ceb8

undo broken eslint update

30d0563

Bump svelte version

0735cc1

Fix tests, update Runes, bump Svelte version

655acc3

SeppahBaws marked this pull request as ready for review September 30, 2024 21:59

SeppahBaws mentioned this pull request Oct 10, 2024

fix deprecated dependencies #1360

Open

Force enable Runes mode in the plugin config

a491f01

SeppahBaws force-pushed the svelte-5 branch from 4cdc003 to a491f01 Compare October 11, 2024 12:48

shadow-identity approved these changes Oct 11, 2024

View reviewed changes

Bump playwright version

b01a6f4

SeppahBaws requested a review from AlecAivazis October 11, 2024 22:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Svelte 5 Runes support #1300

Svelte 5 Runes support #1300

SeppahBaws commented Apr 29, 2024 •

edited

Loading

changeset-bot bot commented Apr 29, 2024 •

edited

Loading

netlify bot commented Apr 29, 2024 •

edited

Loading

netlify bot commented Apr 29, 2024 •

edited

Loading

aumetra commented May 1, 2024

SeppahBaws commented May 15, 2024

paulocr commented May 15, 2024 •

edited

Loading

SeppahBaws commented May 16, 2024

SeppahBaws commented Jun 6, 2024

shadow-identity commented Jul 8, 2024

Serator commented Aug 2, 2024 •

edited

Loading

SeppahBaws commented Aug 2, 2024

Serator commented Aug 2, 2024

SeppahBaws commented Aug 4, 2024

Serator commented Aug 13, 2024

SeppahBaws commented Aug 13, 2024

SeppahBaws commented Oct 11, 2024

Svelte 5 Runes support #1300

Are you sure you want to change the base?

Svelte 5 Runes support #1300

Conversation

SeppahBaws commented Apr 29, 2024 • edited Loading

Feedback welcome!

Sidenotes

To help everyone out, please make sure your PR does the following:

changeset-bot bot commented Apr 29, 2024 • edited Loading

🦋 Changeset detected

netlify bot commented Apr 29, 2024 • edited Loading

✅ Deploy Preview for houdini-docs-next ready!

netlify bot commented Apr 29, 2024 • edited Loading

✅ Deploy Preview for houdinigraphql canceled.

aumetra commented May 1, 2024

SeppahBaws commented May 15, 2024

paulocr commented May 15, 2024 • edited Loading

SeppahBaws commented May 16, 2024

SeppahBaws commented Jun 6, 2024

shadow-identity commented Jul 8, 2024

Serator commented Aug 2, 2024 • edited Loading

SeppahBaws commented Aug 2, 2024

Serator commented Aug 2, 2024

SeppahBaws commented Aug 4, 2024

Serator commented Aug 13, 2024

SeppahBaws commented Aug 13, 2024

SeppahBaws commented Oct 11, 2024

SeppahBaws commented Apr 29, 2024 •

edited

Loading

changeset-bot bot commented Apr 29, 2024 •

edited

Loading

netlify bot commented Apr 29, 2024 •

edited

Loading

netlify bot commented Apr 29, 2024 •

edited

Loading

paulocr commented May 15, 2024 •

edited

Loading

Serator commented Aug 2, 2024 •

edited

Loading